<template>
	<view>
		<view>
			<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="100rpx" :isCenter="true"
				:currentIndex="navIndex" padding="2rpx" activeColor="rgb(255, 0, 0)" :size="110"
				activeLineBg="rgb(255, 0, 0)" textAlign="center" activeLineWidth="100%" activeDirection="space-between"
				activeLineHeight="4rpx" bgColor="#fff" :margin="30" @change="getChange"></sunui-navbar>
		</view>
		<view class="padding20">
			<!-- 搜索框 -->
			<view class="search-content">

				<image class="search-img" :src="search" mode=""></image>
				<input placeholder="请输入搜索用户" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
			<view class="flex-between margin_40rpx_0">
				<view class="">
					共计粉丝 <text style="color: rgb(6, 180, 253);;"> {{count}}</text> 人
				</view>

			</view>
			<!-- 粉丝列表 -->
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item,index) in list" :key="index">

					<view class="fanList flex-columns">
						<view class="flex-between">
							<view class="flex-start-center">
								<image class="Pimage" :src="item.avatar" mode=""></image>
								<view class="flex-columns-center margin-left_30rpx">
									<text class="font-weight_bold margin-bottom_10rpx"
										style="font-size: 30rpx;">{{item.nickname}}</text>
									<text
										style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">手机号：{{item.phone}}</text>
									<view class="flex-start-center margin_10rpx_0" v-if="navIndex==1">
										<text style="color: rgb(153, 153, 153);">上级：</text>
										<image class="image" :src="item.pid_avatar" mode=""></image>
										<view class="flex-column-start">
											<text class="font-weight_bold" style="color: rgb(153, 153, 153)">{{item.pid_nickname}}</text>
											<text style="color: rgb(153, 153, 153)">{{item.pid_phone}}</text>
										</view>
									</view>
									<text
										style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;margin-top: 10rpx;">
										{{item.create_time}}
									</text>
								</view>
							</view>
							<view class="">
								<text style="color: red;"> 佣金收益: {{item.amount}}</text>
							</view>
						</view>
						<!-- <view class="income-expose ">
							<view class="flex-between padding-bottom_20rpx border-bottom-ECECEC">
								<view class="">
									贡献收益： <text class="font-weight_bold" style="color: rgb(255, 0, 0); ">&nbsp
										55</text>

								</view>
								<view class="">
									<uni-icons type="down" size="15"></uni-icons>
								</view>
							</view>
							<view class="flex-between padding-bottom_10rpx margin-top_20rpx">
								<view class="">
									支付订单：55单

								</view>
								<view class="">
									退款单数：99单
								</view>
							</view>
							<view class="flex-between">

								<view class="">
									交易金额：￥55
								</view>
							</view>
						</view> -->
					</view>
				</block>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				userInfo: uni.getStorageSync("userInfo"),
				search: this.$img.search,
				date: null,
				tabIndex: 4,
				currentTime: '2',
				navIndex: 0,
				searchVal: undefined,
				count: '',
				// tabList: [{
				// 	name: '直推粉丝',
				// 	id: '1' //null
				// }, {
				// 	name: '间推粉丝',
				// 	id: '2' //null
				// }, ],
				tabList: [],
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				// 是否是直推
				isWhether: true,
				getConfig: null,
				distributionLevel: null
			}
		},
		onLoad() {
			this.init()
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				},

			});
		},
		onShow() {
			// this.$nextTick(()=>{
			// 	this.mescroll?.resetUpScroll();
			// })

		},
		methods: {
			async init() {
				const resConfig = await this.$http.post({
					url: this.$api.config,
					data: {

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resConfig.code == 0) {




					this.$sun.toast(resConfig.msg, 'none')
					this.getConfig = resConfig.data

					this.distributionLevel = this.getConfig.distribution_level;
					let one = {
						name: '直推粉丝',
						id: 1
					};
					let two = {
						name: '间推粉丝',
						id: 2
					};
					if (this.distributionLevel == 1) {
						this.tabList.push(one);
					}
					if (this.distributionLevel == 2) {
						this.tabList.push(one);
						this.tabList.push(two);
					}
					console.log('this.tabList', this.tabList);
					this.getChange(0);


				} else {

					this.$sun.toast(resConfig.msg, 'none')
				}
			},
			getChange(e) {
				console.log(e)
				this.navIndex = e
				if (this.navIndex == 0) {
					this.isWhether = true

					this.mescroll?.resetUpScroll();
				} else {
					this.isWhether = false
					this.mescroll?.resetUpScroll();
				}
			},
			changeInput(e) {
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			async upCallback(scroll) {
				const urlApi = this.isWhether ? this.$api.fans : this.$api.secondFans
				const result = await this.$http.post({
					url: urlApi,
					data: {
						page: scroll.num,
						limit: 10,
						name: this.searchVal

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.count = result.data.count
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			bindDateChange(e) {


				this.createTime = e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];


			},

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			}




		},
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.search-content {
		justify-content: center;
		display: flex;
		align-items: center;
		// width: 700rpx;
		height: 88rpx;

		background: #fff;
		border-radius: 84rpx;

		.search-img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
			margin-left: 40rpx;
		}

		.icon_close {
			padding: 0rpx 15rpx;
			width: 36rpx;
			height: 36rpx;
			margin-right: 30rpx;
		}
	}

	.fanList {


		border-radius: 20rpx;
		padding: 20rpx;
		background: rgb(255, 255, 255);

		.Pimage {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
		}

		.image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.superiorAvatar {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.income-expose {
			margin-top: 20rpx;

			height: 212rpx;
			border-radius: 12rpx;
			padding: 20rpx;
			background: rgb(245, 245, 245);
		}

		.income {

			height: 39px;
			border-radius: 12rpx;
			padding: 20rpx;
			background: rgb(245, 245, 245);
		}
	}
</style>